<template>
  <!-- 下拉框 -->
  <!-- clearable 开启清空功能 -->
  <el-select :value="value" @change="changeChannnel" clearable placeholder="请选择">
    <el-option v-for="item in channelOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
  </el-select>
</template>

<script>
  export default {
   name:'my-channel',
   // 接收父传子的value频道ID数据
   // 1.现在el-select上的v-model='channelId'没有意义
   // 2. 不能使用 v-model="value" 去选中ID对应的频道 value不能修改
   // 3. 我们只需要赋值给el-select即可,使用value属性来赋值,：value='value' 即可
   props:['value'],
   data() {
       return {
          //选择后产生的Id    
           channelId: null,
          //频道选项    
           channelOptions:[]
       }
   },
   created() {
        this.getChannelOptions()
   },
   methods: {
         // 选择频道
      changeChannnel(channelId){
        // 后台需要的是ID不能是空字符,你可以不传将值改为null
        // if(this.channelId==='') this.channelId=null
        if(channelId === '') channelId = null
        // 将你产生的频道ID数据提交给父组件,通过@input事件
        this.$emit('input',channelId)
      },
       // 获取频道下拉选项数据
      async getChannelOptions() {
        const {
          data: {
            data
          }
        } = await this.$http.get('/channels')
        // console.log(res.data.data.channels)  通过res获取数据
        // { data } 中的  data  === res.data
        // { data: { data } } 第二个data才是变量  data === res.data.data
        // data.channels 就是频道下拉选项数据
        this.channelOptions = data.channels
      },
   },
  }
</script>

<style>

</style>